<template>
  <div>
    <!-- 插值方式过滤器 -->
    {{ msg | reverse }}
    <!-- v-bind形式绑定过滤器 -->
    <h1 :title="msg | toUp">标题</h1>
    <!-- 多个过滤器一起使用 -->
    <div>{{ msg | reverse | toLo }}</div>
    <!-- 传参方式 -->
    <div>{{ msg | reverse("-") }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello World",
    };
  },
  filters: {
    reverse(v, str) {
      //join(str || "")有参数用参数，没参数给默认，不然它会自动以逗号分开
      return v
        .split("")
        .reverse()
        .join(str || "");
    },
    toLo(v) {
      return v.toLowerCase();
    },
  },
};
</script>

<style>
</style>